<!-- eslint-disable vue/no-mutating-props  -->
<template>
  <div>
    <div class="header row jcfe">
      <slot name="dialogForm">
        <el-button type="primary" :icon="Plus" @click="dialogVisible = true">
          添加
        </el-button>
        <el-dialog
          v-model="dialogVisible"
          :title="dialogTitle"
          :close-on-click-modal="false"
        >
          <el-form
            ref="pesticideRef"
            class="pesticide-form"
            :model="model"
            :rules="rules"
            label-width="10em"
          >
            <template v-for="(value, key) in model" :key="key">
              <el-form-item
                v-if="key == 'pesticideRegistrationType'"
                :label="$t(key)"
                :prop="key"
              >
                <el-select v-model="pesticide[key]" style="width: 100%">
                  <el-option :value="1" label="PD" />
                  <el-option :value="2" label="WP" />
                  <el-option :value="3" label="临时登记证" />
                </el-select>
              </el-form-item>
              <template v-else-if="key == 'instructions'">
                <template
                  v-for="(value2, key2) in (model[key] as Record<string,any>)"
                  :key="key2"
                >
                  <el-form-item
                    :label="$t(key2)"
                    :prop="`${key}.${key2}`"
                    class="textarea"
                  >
                    <el-input
                      v-if="key2 == 'toxicityIdentification'"
                      v-model="model[key][key2]"
                    />
                    <el-input
                      v-else
                      v-model="pesticide.instructions[key2]"
                      :rows="3"
                      autosize
                      type="textarea"
                      class="textarea"
                    />
                  </el-form-item>
                </template>
              </template>
              <template v-else-if="/id|createTime/.test(key)" />
              <el-form-item v-else :label="$t(key)" :prop="key">
                <el-input v-model="model[key]" clearable />
              </el-form-item>
            </template>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">
                {{ $t('Cancel') }}</el-button
              >
              <el-button type="primary" @click="onSubmit(pesticideRef)">{{
                $t('Confirm')
              }}</el-button>
            </span>
          </template>
        </el-dialog>
      </slot>
    </div>

    <el-table :data="tableData" stripe>
      <template v-for="item in columnLabels" :key="item">
        <el-table-column v-if="item == 'createTime'" :label="$t(item)">
          <template #default="scope">
            <span>{{ new Date(scope.row.createTime).toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else :prop="item" :label="$t(item)" />
      </template>

      <el-table-column
        label="操作"
        align="center"
        header-align="center"
        width="300"
      >
        <template #default="scope">
          <!-- <el-button>详细</el-button> -->
          <slot name="operate" :row="scope.row">
            <el-button type="primary" icon="Edit" @click="onEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              type="danger"
              icon="Delete"
              @click="onDelete(scope.row.id)"
            >
              删除
            </el-button>
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
/* eslint-disable max-len */
import { Plus } from '@element-plus/icons-vue';
import { shios } from '@/api/Shios';
import { ref, reactive } from 'vue';
import { rules } from '@/libs/Rules';
import { FormInstance } from 'element-plus';
import { inject } from 'vue';

const props = defineProps<{
  columnLabels: Array<string>;
  apiName: string;
  model: Record<string, any>;
}>();
const dialogTitle = ref('添加');
const reload = inject<Function>('reload');
const instructions: Record<string, string> = reactive({
  features:
    '本品含有次氯酸分子，次氯酸分子不带电荷，其扩散穿透细胞膜的能力较强，可使病原菌较迅速地死亡，能有防治烟草青枯病、赤星病，辣椒炭疽病。',
  scopeAndMethodOfUse:
    '1.施药时应喷雾均匀，但不可与碱性农药混合使用； \n2.本品兑水1000倍液,在烟草青枯病、赤星病初期或田间出现零星病斑时喷雾使用。在辣椒苗期花期结椒期病害发生时喷雾使用。 \n3.大风天或预计1小时内降雨，请勿施药。',
  technicalRequirementsForUse:
    '1.辣椒作物上安全间隔期为3天，每季最多使用3次；在烟草上安全间隔期为14天，每季最多使用3次；药液及其废液不得污染各类水域、土壤等环境。 \n2.勿与酸碱物质接触,以免分解失效,产品遇酸碱分解燃烧,应以砂石扑灭或采用化学灭火剂抑制；\n3.请勿将本品与有机磷、铵盐、尿素等农药化肥混合使用。\n4.本品应使用二次稀释法，使用本品前先在容器内装满一半以上的水，然后再慢慢倒入本品，边倒边慢慢搅拌，使其完全溶解，然后再加入其他可与本产品混合复配的农药或微肥。\n5.使用本品时应穿戴防护服、胶靴，戴好口罩和手套，避免吸入药液； \n6.施药期间不可吃东西和饮水，施药后应及时洗手和洗脸。 \n7.使用本品时严禁药液流入河塘,施药器械不得在河塘内洗涤,并注意对蜜蜂和鸟类的不利影响。 \n8.建议与其它不同作物的杀菌剂轮换使用。 \n9.用过的容器应妥善处理，不可做他用，也不可随意丢弃。 \n10.孕妇及哺乳期妇女禁止接触本品。',
  mattersNeedAttention:
    '1.本品为非选择性除草剂,因此施药时应防止药液飘移到柑橘树幼嫩茎叶及邻近的作物田，以免产生药害。 \n2.用药时应穿戴好手套、口罩防护服等，此时不能饮食、吸烟等；施药后洗干净手脸等。 \n3.为减缓杂草的抗药性，请注意与其他农药轮换使用。 \n4.在无风或微风（风力不大于2级）、气温15～28℃的晴天施药，用标准喷雾器压低喷头减压喷雾；使用时注意风向，100米内或下风种植敏感阔叶作物的柑桔园，不能使用本品。 \n5.喷雾器必须专用。清洗器具的废水，不能排入河流、池塘等水源；废弃物应妥善处理，不可他用。禁止在河塘等水体清洗施药器具。赤眼蜂等天敌放飞区域禁用。 \n6.孕妇和哺乳期妇女禁止接触本品。',
  firstAidMeasuresForPoisoning:
    '1.如接触眼睛及皮肤,应立即用清水冲洗。\n2.如不慎吞服,应立即将病人送医院寻求医疗,并出示此包装。',
  storageAndTransportationMethods:
    '1.本品应贮存在干燥、阴凉、通风、防雨处，远离火源或热源。\n2.置于儿童触及不到之处，并加锁。\n3.勿与食品、饮料、饲料等其他商品同贮同运。',
  toxicityIdentification: '低毒',
});
const pesticide = reactive<Record<string, any>>({
  // createTime: '2021-11-08T18:26:37.455631',
  category: '杀菌剂',
  name: '42%三氯异氰尿酸可湿性粉剂-测试',
  registrationNumber: 'PD20095210',
  pesticideRegistrationType: 1,
  productionLicenseNumber: '农药生许（湘）0033',
  productStandardNumber: 'Q/DABV001-2018',
  dosageForm: '可湿性粉剂',
  effectiveDate: null,
  productionBatch: null,
  entrusterEnterprise: '湖南神隆海洋生物工程有限公司',
  entrustedEnterprise: '湖南神隆海洋生物工程有限公司',
  warrantyPeriod: '两年',
  netContent: '500g/瓶',
  address: '湘潭九华经济技术开发银盖南路1号',
  tel: '0731-84692100',
  instructions,
});
const pesticideRef = ref<FormInstance>();
const { data: tableData } = await shios.get<any[]>(props.apiName);
const dialogVisible = ref(false);

/**
 * 提交表单
 * @param {FormInstance} formEl
 */
async function onSubmit(formEl?: FormInstance) {
  // console.log(JSON.stringify(pesticide));
  console.log(props.model);
  console.log(pesticideRef.value);
  await pesticideRef.value?.validate();
  if (!formEl) {
    return;
  }
  await formEl.validate();
  // prettier-ignore
  return;
  // if (dialogTitle.value == '修改') {
  //   const res = await shios.put(props.apiName, {
  //     path: pesticide.id,
  //     data: pesticide,
  //   });
  //   console.log(res);
  // } else {
  //   const res = await shios.post('Pesticides', { data: pesticide });
  //   console.log(res);
  // }

  // reload && reload();
}
/**
 *
 * @param {Record<string, any>}row
 */
function onEdit(row: Record<string, any>) {
  console.log(row);
  dialogTitle.value = '修改';
  Object.assign(pesticide, row);
  dialogVisible.value = true;
}
/**
 * 删除产品
 * @param {number} id 产品id
 */
async function onDelete(id: number) {
  console.log(id);
  const res = await shios.delete('Pesticides', { path: id });
  console.log(res);
  reload && reload();
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 1rem;
  border-bottom: 1px solid #e6ebf5;
}
.pesticide-form {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
    &.textarea {
      width: 100%;
    }
  }

  // grid-template-columns: 1fr 1fr;
}
</style>
